/*
 * @Author: 刘经标 2604132672@qq.com
 * @Date: 2025-04-30 11:14:11
 * @LastEditors: 刘经标 2604132672@qq.com
 * @LastEditTime: 2025-04-30 11:25:31
 * @FilePath: /ai-assistant-frontend/src/components/EmojiPicker.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Box, Popover, IconButton } from '@mui/material';
import { EmojiEmotions } from '@mui/icons-material';
import { useState } from 'react';
import EmojiPicker, { Theme } from 'emoji-picker-react';

interface EmojiPickerProps {
  onSelect: (emoji: string) => void;
}

export const EmojiPickerComponent = ({ onSelect }: EmojiPickerProps) => {
  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'emoji-popover' : undefined;

  return (
    <>
      <IconButton onClick={handleClick}>
        <EmojiEmotions />
      </IconButton>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
        transformOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
      >
        <Box sx={{ p: 2 }}>
          <EmojiPicker
            onEmojiClick={(emojiObject) => {
              onSelect(emojiObject.emoji);
              handleClose();
            }}
            width={300}
            height={400}
            theme={Theme.LIGHT}
          />
        </Box>
      </Popover>
    </>
  );
}; 